<template>
  <div class="demo">
    <vue-qr :correctLevel="3" :autoColor="false" colorDark="#313a90" :bgSrc="bgSrc" :logoSrc="logoSrc" :text="codeUrl" :size="95" :margin="0" :logoMargin="3"></vue-qr>
    <div class="template-1">
      <div class="title-level-1" style="display: flex;align-items: center;">
        <div class="title-line color-border" style="flex: 1;min-width: 60px;height: 3px;border-top: solid 2px #f88c39;border-bottom: solid 1px #f88c39;"></div>
        <div class="title-text color-font" style="margin: 0 10px;color: #f88c39;font-size: 28px;line-height: 56px;font-weight: bold;">一级标题</div>
        <div class="title-line color-border" style="flex: 1;min-width: 60px;height: 3px;border-top: solid 2px #f88c39;border-bottom: solid 1px #f88c39;"></div>
      </div>
      <div class="title-level-2 color-border" style="padding-bottom: 3px;border-bottom: solid 1px #f88c39;">
        <div class="title-text color-border color-font" style="display: inline-block;font-size: 24px;line-height: 48px;color: #f88c39;border-bottom: solid 2px #f88c39;">二级标题</div>
      </div>
      <div class="title-level-3">
        <div class="title-text color-font" style="font-size: 20px;line-height: 40px;color: #f88c39;">三级标题</div>
      </div>
    </div>
    <div class="template-2">
      <div class="title-level-1 color-font" style="display: flex;justify-content: center;color: #d23321;">
        <div class="stars-wrapper" style="display: flex;align-items: center;">
          <div class="star-line" style="height: 2px;width: 28px;background: linear-gradient(270deg,rgba(210,51,33,1), rgba(210,51,33,0));"></div>
          <span class="iconfont icon-star star-12" style="margin: 0 2px;font-size: 12px;"></span>
          <i class="iconfont icon-star star-16" style="margin: 0 2px;font-size:16px;"></i>
          <i class="iconfont icon-star star-20" style="margin: 0 2px;font-size: 20px;"></i>
        </div>
        <div class="title-text" style="margin: 0 10px;font-size: 28px;line-height: 56px;font-weight: bold;">一级标题</div>
        <div class="stars-wrapper stars-right" style="display: flex;align-items: center;">
          <i class="iconfont icon-star star-20" style="margin: 0 2px;font-size: 20px;"></i>
          <i class="iconfont icon-star star-16" style="margin: 0 2px;font-size:16px;"></i>
          <i class="iconfont icon-star star-12" style="margin: 0 2px;font-size: 12px;"></i>
          <div class="star-line"  style="height: 2px;width: 28px;background: linear-gradient(270deg,rgba(210,51,33,0), rgba(210,51,33,1));"></div>
        </div>
      </div>
      <div class="title-level-2 color-border" style="padding: 0 12px;background: linear-gradient(90deg,rgba(210,51,33,0.08) 0%, rgba(210,51,33,0.00) 100%);border-left: solid 8px #d23321;font-weight: bold;font-size: 24px;line-height: 2;">
        <div class="title-text color-font" style="color: #d23321;word-break: break-all;font-weight: bold;">二级标题</div>
      </div>
      <div class="title-level-3 color-font" style="position: relative;color: #d23321;">
        <i class="iconfont icon-star" style="position: absolute;left: 10px;top: 10px;font-size: 20px;line-height: 1;"></i>
        <div class="title-text" style="margin-left: 40px;font-size: 20px;line-height: 40px;">三级标题</div>
      </div>
    </div>
    <div class="template-3">
      <div class="title-level-1" style="text-align: center;">
        <div class="parallelogram color-bg" style="display: inline-block;padding: 0 24px;transform: skewX(-10deg);border-radius: 4px;background-color: #70ad51;box-shadow: 4px 4px 8px rgba(112, 173, 81,.6);color: #fff;">
          <div class="title-text" style="transform: skewX(10deg);word-break: break-all;font-size: 28px;line-height: 56px;font-weight: bold;">打分</div>
        </div>
      </div>
      <div class="title-level-2" style="display: flex;align-items: center;justify-content: center;margin: 0 12px;">
          <div class="title-block-wrapper" style="display: flex;align-items: center;">
            <div class="title-block-shadow opacity-bg" data-opacity="0.3" style="height: 12px;width: 12px;border-radius: 2px;background-color: rgba(112,173,81,.3);transform: rotate(45deg);margin-right: -5px;"></div>
            <div class="title-block" style="height: 16px;width: 16px;border-radius: 2px;background-color: #70ad51;transform: rotate(45deg);"></div>
          </div>
          <div class="title-text color-font" style="font-weight: bold;font-size: 24px;color: #70ad51;line-height: 48px;">请输入二级标题</div>
          <div class="title-block-wrapper" style="display: flex;align-items: center;">
            <div class="title-block" style="height: 16px;width: 16px;border-radius: 2px;background-color: #70ad51;transform: rotate(45deg);"></div>
            <div class="title-block-shadow opacity-bg" data-opacity="0.3" style="height: 12px;width: 12px;border-radius: 2px;background-color: rgba(112,173,81,.3);transform: rotate(45deg);margin-left: -5px;"></div>
          </div>
      </div>
      <div class="title-level-3" style="display: flex;">
        <div class="title-dot color-bg" style="width: 10px;height: 10px;margin: 15px 10px 0 0;border-radius: 2px;background-color: #70ad51;"></div>
        <div class="title-text color-font" style="flex: 1;color: #70ad51;line-height: 40px;font-size: 20px;font-weight: bold;">请输入三级标题</div>
      </div>
    </div>
    <div class="template-4">
      <div class="title-level-1" style="display: flex;align-items: center;">
        <div class="line-bar opacity-bg" data-opacity="0.2" style="flex: 1;min-width: 80px;height: 1px;background-color: rgb(131, 89, 179, 0.2);"></div>
        <div class="line-dot opacity-bg" data-opacity="0.2" style="height: 8px;width: 8px;border-radius: 100%;background-color: rgb(131, 89, 179, 0.2);"></div>
        <div class="title-text color-font" style="margin: 0 10px;color: #8359B3;font-size: 28px;line-height: 56px;font-weight: bold;word-break: break-all;font-weight: bold;">一级标题</div>
        <div class="line-dot  opacity-bg" data-opacity="0.2" style="height: 8px;width: 8px;border-radius: 100%;background-color: rgb(131, 89, 179, 0.2);"></div>
        <div class="line-bar  opacity-bg" data-opacity="0.2" style="flex: 1;min-width: 80px;height: 1px;background-color: rgb(131, 89, 179, 0.2);"></div>
      </div>
      <div class="title-level-2" style="display: flex;justify-content: center;">
        <div class="title-content" style="display: flex;align-items: center;">
          <div class="title-dots" style="margin: 0 5px;">
            <div class="title-dot opacity-bg" data-opacity="0.2" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.2);"></div>
            <div class="title-dot opacity-bg" data-opacity="0.2" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.2);"></div>
          </div>
          <div class="title-dots" style="margin: 0 5px;">
            <div class="title-dot opacity-bg" data-opacity="0.5" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.5);"></div>
            <div class="title-dot opacity-bg" data-opacity="0.5" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.5);"></div>
          </div>
          <div class="title-dots" style="margin: 0 5px;">
            <div class="title-dot opacity-bg" data-opacity="0.7" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.7);"></div>
            <div class="title-dot opacity-bg" data-opacity="0.7" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.7);"></div>
          </div>
          <div class="title-dots" style="margin: 0 5px;">
            <div class="title-dot color-bg" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: #8359B3;"></div>
            <div class="title-dot color-bg" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: #8359B3;"></div>
          </div>
          <div class="title-text color-font" style="margin: 0 5px;font-size: 24px;line-height: 48px;color: #8359B3;word-break: break-all;font-weight: bold;">二级标题</div>
          <div class="title-dots" style="margin: 0 5px;">
            <div class="title-dot color-bg" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: #8359B3;"></div>
            <div class="title-dot color-bg" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: #8359B3;"></div>
          </div>
          <div class="title-dots" style="margin: 0 5px;">
            <div class="title-dot opacity-bg" data-opacity="0.7" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.7);"></div>
            <div class="title-dot opacity-bg" data-opacity="0.7" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.7);"></div>
          </div>
          <div class="title-dots" style="margin: 0 5px;">
            <div class="title-dot opacity-bg" data-opacity="0.5" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.5);"></div>
            <div class="title-dot opacity-bg" data-opacity="0.5" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.5);"></div>
          </div>
          <div class="title-dots" style="margin: 0 5px;">
            <div class="title-dot opacity-bg" data-opacity="0.2" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.2);"></div>
            <div class="title-dot opacity-bg" data-opacity="0.2" style="width: 6px;height: 6px;margin: 5px 0;border-radius: 100%;background-color: rgb(131, 89, 179, 0.2);"></div>
          </div>
        </div>
      </div>
      <div class="title-level-3" style="padding: 0 20px;border-radius: 900px;background: linear-gradient(90deg,rgb(131, 89, 179, 0.2), rgb(255, 255, 255, 0));">
        <div class="title-text color-font" style="font-size: 20px;line-height: 40px;color: #8359B3;word-break: break-all;font-weight: bold;">三级标题</div>
      </div>
    </div>
    <br/>
    <div class="paragraph-1" data-opacity="0.05" style="padding-top: 20px;word-break: break-all;">
      <div class="p-wrapper opacity-bg" data-opacity="0.05" style="padding: 36px 16px 16px;background-color: rgba(248,140,57,0.05);border-radius: 8px;">
        <div class="p-title" style="margin: -56px 0 16px 0;text-align: center;">
          <div class="p-title-text color-bg" style="display: inline-block;padding: 0 16px;border-radius: 999px;font-size: 20px;line-height: 40px;font-weight: bold;background-color: #f88c39;color: #fff;">这是标题的名称</div>
        </div>
        <div class="p-content color-font" style="color: #444;font-size: 16px;line-height: 32px;">根据我国体育发展的特点和规律，可以为“体育”下这样一个定义：体育是一种特殊的社会现象，它是以发展身体、增强体质、增进健康为基本特征的教育过程和社会文化活动。</div> 
      </div>
    </div>
    <div class="paragraph-2 color-border" style="padding: 10px;word-break: break-all;border: solid 1px #70AD51;">
      <div class="p-wrapper opacity-bg" data-opacity="0.05" style="background-color:rgba(112,173,81,0.05);">
        <div class="p-title-text color-bg" style="display: inline-block;padding: 0 10px;margin: 10px -10px;font-size: 20px;line-height: 40px;font-weight: bold;background-color: #70AD51;color: #fff;">这是标题的名称</div>
        <div class="p-content color-font" style="color: #70AD51;font-size: 16px;line-height: 32px;">根据我国体育发展的特点和规律，可以为“体育”下这样一个定义：体育是一种特殊的社会现象，它是以发展身体、增强体质、增进健康为基本特征的教育过程和社会文化活动。</div>
      </div>
    </div>
    <div class="paragraph-3" style="word-break: break-all;">
     <div class="p-title-text color-font" style="display: inline-block;font-size: 20px;line-height: 40px;font-weight: bold;color: #D23321;">01  这是标题的名称</div>
     <div class="p-content" style="margin-left: 12px;border-left: solid 1px #e3e3e9;padding-left: 20px;color: #444;font-size: 16px;line-height: 32px;">根据我国体育发展的特点和规律，可以为“体育”下这样一个定义：体育是一种特殊的社会现象，它是以发展身体、增强体质、增进健康为基本特征的教育过程和社会文化活动。</div>
    </div>
    <div class="paragraph-4 tmp-p" contenteditable="false" style="word-break: break-all;">
      <div class="p-title-wrapper" style="display: flex;">
        <div class="title-dot color-bg" style="width: 8px;height: 8px;border-radius: 100%;margin: 16px 8px 0 0;background-color: #8359B3;"></div>
        <div class="p-title-text color-font" contenteditable="true" style="color: #8359B3;font-size: 20px;line-height: 2;font-weight: bold;">这是标题名称</div>
      </div>
      <div class="p-content opacity-bg" data-opacity="0.06" contenteditable="true" style="padding: 10px;background: rgba(131,89,179,0.06);border: 1px solid rgba(131,89,179,0.20);border-radius: 4px;font-size: 16px;line-height: 2;">根据我国体育发展的特点和规律，可以为“体育”下这样一个定义：体育是一种特殊的社会现象，它是以发展身体、增强体质、增进健康为基本特征的教育过程和社会文化活动。
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import vueQr from 'vue-qr'
import img from '../assets/logo.png'
export default {
  name: 'Demo',
  data () {
    return {
      logoSrc: require('../assets/logo.png'),
      bgSrc: require('../assets/logo.png'),
      codeUrl: 'https://github.com/lx719679895'
    }
  },
  mounted () {

  },
  methods: {

  },
  components:{
    vueQr
  }
}
</script>
<style lang="scss" scoped>
.demo{
  width: 400px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.paragraph-1,.paragraph-2,.paragraph-3,.paragraph-4{
  margin: 20px 0;
}
.template-1{
  padding: 12px 10px;
  border: dashed 1px #e3e3e9;
  margin: 20px 0;
  .title-level-1{
    display: flex;
    align-items: center;
    .title-line{
      min-width: 60px;
      padding-top: 3px;
      border-top: solid 2px #f88c39;
      border-bottom: solid 1px #f88c39;
    }
    .title-text{
      margin: 0 10px;
      color: #f88c39;
      font-size: 28px;
      line-height: 56px;
      font-weight: bold;
      word-break: break-all;
      font-weight: bold;
    }
  }
  .title-level-2{
    padding-bottom: 3px;
    border-bottom: solid 1px #f88c39;
    .title-text{
      display: inline-block;
      font-size: 24px;
      line-height: 48px;
      color: #f88c39;
      border-bottom: solid 2px #f88c39;
      word-break: break-all;
      font-weight: bold;
    }
  }
  .title-level-3{
    .title-text{
      font-size: 20px;
      line-height: 40px;
      color: #f88c39;
      word-break: break-all;
      font-weight: bold;
    }
  }
}
.template-2{
  .title-level-1{
    display: flex;
    justify-content: center;
    color: #d23321;
    .stars-wrapper{
      display: flex;
      align-items: center;
      .star-line{
        height: 2px;
        width: 28px;
        background: linear-gradient(270deg,rgba(210,51,33,1) 0%, rgba(210,51,33,0.00))
      }
      &.stars-right{
        .star-line{
          background: linear-gradient(270deg,rgba(210,51,33,0.00) 0%, rgba(210,51,33,1))
        }
      }
      .icon-star{
        margin: 0 2px;
      }
      .star-20{
        font-size: 20px;
      }
      .star-16{
        font-size: 16px;
      }
      .star-12{
        font-size: 12px;
      }
    }
    .title-text{
      margin: 0 10px;
      font-size: 28px;
      line-height: 56px;
      font-weight: bold;
      word-break: break-all;
    }
  }
  .title-level-2{
    padding: 0 12px;
    background: linear-gradient(90deg,rgba(210,51,33,0.08) 0%, rgba(210,51,33,0.00) 100%);
    border-left: solid 8px #d23321;
    font-weight: bold;
    font-size: 24px;
    line-height: 2;
    .title-text{
      color: #d23321;
      word-break: break-all;
      font-weight: bold;
    }
  }
  .title-level-3{
    position: relative;
    color: #d23321;
    .icon-star{
      position: absolute;
      left: 10px;
      top: 10px;
      font-size: 20px;
      line-height: 1;
    }
    .title-text{
      margin-left: 40px;
      font-size: 20px;
      line-height: 40px;
      word-break: break-all;
      font-weight: bold;
    }
  }
  
}
.template-3{
  .title-level-1{
    text-align: center;
  }
  .parallelogram{
    display: inline-block;
    padding: 0 24px;
    transform: skewX(-10deg);
    border-radius: 4px;
    background-color: #70ad51;
    box-shadow: 4px 4px 8px rgba(112, 173, 81,.6);
    color: #fff;
    .title-text{
      transform: skewX(10deg);
      word-break: break-all;
      font-size: 28px;
      line-height: 56px;
      font-weight: bold;
    }
  }
  .title-level-2{
    display: flex;
    align-items: center;
    justify-content: center;
    .title-block-wrapper{
      display: flex;
      align-items: center;
    }
    .title-block-shadow{
      height: 12px;
      width: 12px;
      border-radius: 2px;
      background-color: rgba(112,173,81,.3);
      transform: rotate(45deg);
      margin-right: -5px;
    }
    .title-block{
      height: 16px;
      width: 16px;
      border-radius: 2px;
      background-color: #70ad51;
      transform: rotate(45deg);
    }
    .title-text{
      margin: 0 12px;
      font-weight: bold;
      font-size: 24px;
      color: #70ad51;
      line-height: 48px;
    }
  }
  .title-level-3{
    display: flex;
    .title-dot{
      width: 10px;
      height: 10px;
      margin: 15px 10px 0 0;
      border-radius: 2px;
      background-color: #70ad51;
      transform: rotate(45deg);
    }
    .title-text{
      flex: 1;
      color: #70ad51;
      line-height: 40px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.template-4{
  .title-level-1{
    display: flex;
    align-items: center;
    .line-bar{
      flex: 1;
      min-width: 80px;
      height: 1px;
      background-color: rgb(131, 89, 179, 0.2);
    }
    .line-dot{
      height: 8px;
      width: 8px;
      border-radius: 100%;
      background-color: rgb(131, 89, 179, 0.2);
    }
    .title-text{
      margin: 0 10px;
      color: #8359B3;
      font-size: 28px;
      line-height: 56px;
      font-weight: bold;
      word-break: break-all;
      font-weight: bold;
    }
  }
  .title-level-2{
    display: flex;
    justify-content: center;
    .title-content{
      display: flex;
      align-items: center;
    }
    .title-dots{
      margin: 0 5px;
      .title-dot{
        width: 6px;
        height: 6px;
        margin: 5px 0;
        border-radius: 100%;
        background-color: rgb(131, 89, 179, 0.2);
      }
    }
    .title-text{
      margin: 0 5px;
      font-size: 24px;
      line-height: 48px;
      color: #8359B3;
      word-break: break-all;
      font-weight: bold;
    }
  }
  .title-level-3{
    padding: 0 20px;
    border-radius: 900px;
    background: linear-gradient(90deg,rgb(131, 89, 179, 0.2), rgb(255, 255, 255, 0));
    .title-text{
      font-size: 20px;
      line-height: 40px;
      color: #8359B3;
      word-break: break-all;
      font-weight: bold;
    }
  }
}
.paragraph-1{
  padding-top: 20px;
  word-break: break-all;
  .p-wrapper{
    padding: 36px 16px 16px;
    background-color: rgba(248,140,57,0.05);
    border-radius: 8px;
  }
  .p-title{
    margin: -56px 0 16px 0;
    text-align: center;
  }
  .p-title-text{
    display: inline-block;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    background-color: #f88c39;
    color: #fff;
  }
  .p-content{
    color: #444;
    font-size: 16px;
    line-height: 32px;
  }
}
.paragraph-2{
  padding: 10px;
  word-break: break-all;
  border: solid 1px #70AD51;
  .p-wrapper{
    background-color:rgba(112,173,81,0.05);
  }
  .p-title-text{
    display: inline-block;
    padding: 0 10px;
    margin: 10px -10px;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    background-color: #70AD51;
    color: #fff;
  }
  .p-content{
    color: #70AD51;
    font-size: 16px;
    line-height: 32px;
  }
}
.paragraph-3{
  word-break: break-all;
  .p-title-text{
    display: inline-block;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    color: #D23321;
  }
  .p-content{
    margin-left: 12px;
    border-left: solid 1px #e3e3e9;
    padding-left: 20px;
    color: #444;
    font-size: 16px;
    line-height: 32px;
  }
}
.paragraph-4{
  word-break: break-all;
  .p-title-wrapper{
    display: flex;
  }
  .p-title-text{
    color: #8359B3;
    font-size: 20px;
    line-height: 2;
    font-weight: bold;
  }
  .title-dot{
    width: 8px;
    height: 8px;
    border-radius: 100%;
    margin: 16px 8px 0 0;
    background-color: #8359B3;
  }
  .p-content{
    padding: 10px;
    background: rgba(131,89,179,0.06);
    border: 1px solid rgba(131,89,179,0.20);
    border-radius: 4px;
    font-size: 16px;
    line-height: 2;
  }
}


</style>
